﻿@using Utils;
@model WebUI.Models.JobPayNonLoggedInViewModel
@{
    ViewBag.Title = "Pay Your Listing - JuicyBasket";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Pay Your Listing</h1>
<div class="mainSection">
    <div class="wizard-title">
        <div class="wizard-step">1. Create a Job Listing</div>
        <div class="wizard-sp">»</div>
        <div class="wizard-step">2. Preview</div>
        <div class="wizard-sp"> »</div>
        <div class="wizard-step active">3. Pay</div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

    @if (Model.Job == null || Model.Co == null || Model.Job.JobID <= 0 || Model.Co.CoID <= 0)
    { 
        <div class="null-message">
	        <h2>You have no job to pay, please <a href="/job/post">create a job listing</a> first</h2>
        </div>
    }
    else
    {
        <div class="mainCol jp">
            <div class="spacer"></div>
            @using (Html.BeginForm("GoPaymentForNonLoggedIn", "Co", FormMethod.Post, new { ID = "payment-form" }))
            {
                <div class="clear"></div>
                <div class="fl left">Choose Job Package<span>&nbsp; *</span></div>
                <div class="fl right">
                    @Html.DropDownListFor(m => m.JobPackageID, Model.JobPackageList)
                </div>
                <div class="clear"></div>
                <div class="fl left left-tip">&nbsp;</div>
                <div class="fl right right-tip">Job posts last 30 days and credits never expire</div>
                <div class="smallspacer"></div>
                <div class="tabsbottom"></div>
                
                <div class="clear"></div>
                <div class="fl left">&nbsp;</div>
                <div class="fl right">
                    All major credit cards accepted. Feel free to <a href="/contact">contact us</a> if you have any question<br/>
                    <div class="minispacer"></div>
                    <img src="/content/images/icon-cc.png"/>
                </div>
                
                <div id="card-error" class="field-validation-error" style="margin-left:180px;padding-bottom:5px;"></div>
                
                <div class="clear"></div>
                <div class="fl left">Credit Card Number<span>&nbsp;*</span></div>
                <div class="fl right">
                    <input type="text" size="20" autocomplete="off" class="card-number" />
                </div>
                <div class="minispacer"></div>
                
                <div class="clear"></div>
                <div class="fl left">Expiration (MM/YYYY)<span>&nbsp;*</span></div>
                <div class="fl right">
                    <input type="text" size="2" autocomplete="off" class="card-expiry-month" style="width:50px;"/>
                    <span> / </span>
                    <input type="text" size="4" autocomplete="off" class="card-expiry-year" style="width:90px;"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="font-size:110%;">Security Code/CVC<span style="color:Red;"> *</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" size="4" autocomplete="off" class="card-cvc" style="width:100px;"/>
                </div>
                <div class="minispacer"></div>
                
                <div class="tabsbottom"></div>
                
                <div class="fl">
                    <strong style="font-size:18px;">Account Details</strong>
                    <div class="minispacer"></div>
                    <div>Create an account to track listing, make edits, manage credits and more.</div>
                </div>
                <div class="spacer"></div>
                <div class="clear"></div>
                <div class="fl left">User name<span>&nbsp;*</span></div>
                <div class="fl right">
                    @Html.TextBoxFor(m => m.UserName)
                </div>
                <div class="minispacer"></div>
                
                <div class="clear"></div>
                <div class="fl left">Email<span>&nbsp;*</span></div>
                <div class="fl right">
                    @Html.TextBoxFor(m => m.Email)
                </div>
                <div class="minispacer"></div>
                
                <div class="clear"></div>
                <div class="fl left">Password<span>&nbsp;*</span></div>
                <div class="fl right">
                    @Html.PasswordFor(m => m.Password)
                </div>
                <div class="minispacer"></div>
                
                <div class="spacer"></div>
                <div class="tabsbottom"></div>
                <div class="fr">
                    <a class="gray-submit" href="/job/preview">← Preview your listing</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="submit" id="submit-button" name="submit-button" value="Pay and publish your listing →" class="blue-submit" />
                    
                </div>
                <div class="smallspacer"></div>
                <div class="fr" id="processingHint">
                    <img src="/content/images/spinnerlg.gif"/><div>&nbsp; Processing...</div>
                </div>
            }
        </div>
        <div class="sideCol">
            <div class="spacer"></div>
            <div><strong>Order Details</strong></div>
            <div class="tabsbottom"></div>
            <div id="orderInfo">
            
            </div>
        </div>
    }
    <div class="clear"></div>
</div>

@section FooterContent
{
    <script type="text/javascript" src="@Url.StaticFile("~/content/jquery.form.js")"></script>
    <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
    <script type="text/javascript">
        // this identifies your website in the createToken call below
        var stripePublishableKey = '@GlobalUtilities.GetInstance().StripePublishableKey';
        Stripe.setPublishableKey(stripePublishableKey);
    </script>
    <script type="text/javascript" src="@Url.StaticFile("~/content/jobpayment.js")"></script>
}
